<template>
  <view class="record-container">
    <!-- 预约状态筛选 -->
    <view class="filter-tabs">
      <view 
        class="tab-item"
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{ active: currentTab === tab.value }"
        @tap="switchTab(tab.value)"
      >
        {{ tab.label }}
      </view>
    </view>
    
    <!-- 预约记录列表 -->
    <view class="record-list">
      <view 
        class="record-item card"
        v-for="(record, index) in filteredRecords"
        :key="index"
      >
        <view class="header">
          <text class="hospital">{{ record.hospital }}</text>
          <text class="status" :class="record.status">{{ record.statusText }}</text>
        </view>
        
        <view class="info">
          <view class="left">
            <text class="department">{{ record.department }}</text>
            <text class="doctor">{{ record.doctorName }} {{ record.doctorTitle }}</text>
            <text class="time">{{ record.date }} {{ record.time }}</text>
          </view>
          <image :src="record.doctorAvatar" mode="aspectFill" class="avatar" />
        </view>
        
        <view class="patient">
          <text class="label">就诊人：</text>
          <text class="name">{{ record.patientName }}</text>
          <text class="relation">({{ record.patientRelation }})</text>
        </view>
        
        <view class="footer">
          <view class="fee">
            <text class="label">挂号费：</text>
            <text class="amount">¥{{ record.fee }}</text>
          </view>
          <view class="actions">
            <button 
              class="action-btn"
              v-if="record.status === 'unpaid'"
              @tap="goPay(record)"
            >
              去支付
            </button>
            <button 
              class="action-btn"
              v-if="record.status === 'paid'"
              @tap="cancelAppointment(record)"
            >
              取消预约
            </button>
            <button 
              class="action-btn"
              v-if="record.status === 'completed'"
              @tap="viewReport(record)"
            >
              查看报告
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 状态标签
const tabs = [
  { label: '全部', value: 'all' },
  { label: '待支付', value: 'unpaid' },
  { label: '待就诊', value: 'paid' },
  { label: '已完成', value: 'completed' },
  { label: '已取消', value: 'cancelled' }
]

const currentTab = ref('all')

// 预约记录数据
const records = ref([
  {
    id: 1,
    hospital: '澳门镜湖医院',
    department: '心内科',
    doctorName: '张医生',
    doctorTitle: '主任医师',
    doctorAvatar: '/static/doctor/doctor1.png',
    date: '2024-03-21',
    time: '09:00',
    patientName: '张三',
    patientRelation: '本人',
    fee: 100,
    status: 'unpaid',
    statusText: '待支付'
  },
  {
    id: 2,
    hospital: '澳门科大医院',
    department: '儿科',
    doctorName: '李医生',
    doctorTitle: '副主任医师',
    doctorAvatar: '/static/doctor/doctor2.png',
    date: '2024-03-20',
    time: '10:30',
    patientName: '张小明',
    patientRelation: '子女',
    fee: 80,
    status: 'paid',
    statusText: '待就诊'
  }
])

// 根据状态筛选记录
const filteredRecords = computed(() => {
  if (currentTab.value === 'all') {
    return records.value
  }
  return records.value.filter(record => record.status === currentTab.value)
})

// 切换状态标签
const switchTab = (tab) => {
  currentTab.value = tab
}

// 去支付
const goPay = (record) => {
  uni.navigateTo({
    url: `/pages/payment/index?orderId=${record.id}`
  })
}

// 取消预约
const cancelAppointment = (record) => {
  uni.showModal({
    title: '取消预约',
    content: '确定要取消该预约吗？',
    success: (res) => {
      if (res.confirm) {
        // 调用取消预约接口
        uni.showToast({
          title: '取消成功',
          icon: 'success'
        })
      }
    }
  })
}

// 查看报告
const viewReport = (record) => {
  uni.navigateTo({
    url: `/pages/report/detail?id=${record.id}`
  })
}
</script>

<style lang="scss">
.record-container {
  min-height: 100vh;
  background: $bg-color;
  
  .filter-tabs {
    display: flex;
    background: #fff;
    padding: 20rpx 30rpx;
    margin-bottom: 20rpx;
    box-shadow: $shadow-sm;
    
    .tab-item {
      flex: 1;
      text-align: center;
      font-size: 28rpx;
      color: $text-regular;
      padding: 16rpx 0;
      position: relative;
      
      &.active {
        color: $primary-color;
        font-weight: bold;
        
        &::after {
          content: '';
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          width: 40rpx;
          height: 4rpx;
          background: $primary-color;
          border-radius: 2rpx;
        }
      }
    }
  }
  
  .record-list {
    padding: 20rpx;
    
    .record-item {
      margin-bottom: 20rpx;
      
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        
        .hospital {
          font-size: 32rpx;
          color: $text-primary;
          font-weight: bold;
        }
        
        .status {
          font-size: 26rpx;
          padding: 4rpx 12rpx;
          border-radius: $radius-sm;
          
          &.unpaid {
            color: $warning;
            background: rgba($warning, 0.1);
          }
          
          &.paid {
            color: $primary-color;
            background: rgba($primary-color, 0.1);
          }
          
          &.completed {
            color: $success;
            background: rgba($success, 0.1);
          }
          
          &.cancelled {
            color: $text-secondary;
            background: rgba($text-secondary, 0.1);
          }
        }
      }
      
      .info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20rpx;
        
        .left {
          flex: 1;
          
          .department {
            font-size: 28rpx;
            color: $text-primary;
            margin-bottom: 8rpx;
            display: block;
          }
          
          .doctor {
            font-size: 26rpx;
            color: $text-regular;
            margin-bottom: 8rpx;
            display: block;
          }
          
          .time {
            font-size: 26rpx;
            color: $primary-color;
          }
        }
        
        .avatar {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50rpx;
          margin-left: 20rpx;
        }
      }
      
      .patient {
        margin-bottom: 20rpx;
        
        .label {
          font-size: 26rpx;
          color: $text-regular;
        }
        
        .name {
          font-size: 26rpx;
          color: $text-primary;
          font-weight: bold;
        }
        
        .relation {
          font-size: 26rpx;
          color: $text-secondary;
        }
      }
      
      .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 20rpx;
        border-top: 1rpx solid #eee;
        
        .fee {
          .label {
            font-size: 26rpx;
            color: $text-regular;
          }
          
          .amount {
            font-size: 32rpx;
            color: $danger;
            font-weight: bold;
          }
        }
        
        .actions {
          display: flex;
          gap: 20rpx;
          
          .action-btn {
            height: 60rpx;
            line-height: 60rpx;
            padding: 0 30rpx;
            font-size: 26rpx;
            color: $primary-color;
            background: $primary-light;
            border-radius: $radius-xl;
            
            &:active {
              opacity: 0.8;
            }
          }
        }
      }
    }
  }
}
</style>